<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		<meta name="description" content="PSD Provided by http://nettuts.s3.amazonaws.com/017_Creatif/Site/index.html"/>
        <title>
            Grids layout demo
        </title>
        <!--[if lt IE 9]>
        <script src="js/html5.js"></script>
        <![endif]-->
        <!--样式文件-->
		<link rel="stylesheet" type="text/css" href="css/html5.css" /> 
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
        <link rel="stylesheet" type="text/css" href="css/text.css" />
        <link rel="stylesheet" type="text/css" href="css/layout.css" />
		<link rel="stylesheet" type="text/css" href="css/widgets.css" />
        <link rel="stylesheet" type="text/css" href="css/site.xx.css" />
		<link rel="stylesheet" type="text/css" href="css/site.xx.html5.css" /> 
        <!--JQuery-->
        <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
    </head>
    
    <body id="layout-demo">
        <header id="header" class="w-33">
			<aside id="slogan" class="g-16">
				<figure id="logo">
					<img src="images/logo.jpg" width="73" height="55" alt="logo"/>
				</figure>
				<h1>Grids layout demo- <a href="#" id="btn-show-layout" class="sub-title">Toggle layout</a></h1>
			</aside>
			<div class="g-17">
				<nav id="nav" class="wdg-hnav">
					<ul class="clearfix">
						<li><a href="#" class="active">Home</a></li>
						<li><a href="#">Blog</a></li>
						<li><a href="#">Projects</a></li>
						<li><a href="#">Gallery</a></li>
						<li><a href="#">Resume</a></li>
						<li><a href="#">Labs</a></li>
						<li><a href="#">About</a></li>
					</ul>
				</nav>
			</div>
        </header>
		<section id="page" class="w-33">
			<section class="g-33">
				<div id="project-featured" class="wdg-rect clearfix">
					<img alt="Featured Project" class="wdg-ribbon" width="149" height="87" src="images/ribbon_featured.png"/>
					<figure class="project-logo">
						<img class="wdg-img" src="images/sample_feature.jpg" width="398" height="248" alt="project-logo"/>
					</figure>
					<div class="project-info wdg-core">
						<div class="project-hd wdg-hd">
							<h2>Eden Website Design</h2>
							<p class="project-meta">
							in <a href="">web design</a> tagged <a href="">corporate</a>, <a href="">web2</a>
							</p>
						</div>
						<div class="project-bd wdg-bd">
						And then a short description of the website would go in here.  Something saying maybe what awesome skills I used on the project and how happy the client was. 
						</div>
						<div class="wdg-ft">
							<a class="wdg-btn" href="">View Project</a>
						</div>
					</div>
				</div>
			</section>

			<section class="col2-m-l clearfix">
				<div class="col-m g-21">
					<div class="wdg-rect wdg-rect-dark">
                    	<img alt="Recent Projects" class="wdg-ribbon" width="149" height="87" src="images/ribbon_recent.png"/>
                        <img  alt="AudioJungle" class="topic-thumb" src="images/sample_mini_portfolio3.jpg" width="100" height="100"/>
                    	<div class="wdg-core">
							<h3>AudioJungle Site Design</h3>
							<div class="wdg-bd">
                            Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. <a href="#">View Project</a>
							</div>
                        </div>                    
                    </div>
					<div class="wdg-rect wdg-rect-dark">
                        <img alt="CollisTaeed" class="topic-thumb" src="images/sample_mini_portfolio2.jpg" width="100" height="100"/>
                    	<div class="wdg-core">
                            <h3 class="wdg-hd">CollisTaeed Homepage</h3>
                            <div class="wdg-bd">
							Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. <a href="#">View Project</a>
							</div>
                        </div>                    
                    </div>	
					<div class="wdg-rect wdg-rect-dark">
                        <img alt="PSDTUTS" class="topic-thumb" src="images/sample_mini_portfolio.jpg" width="100" height="100"/>
                    	<div class="wdg-core">
                            <h3 class="wdg-hd">AudioJungle Site Design</h3>
                            <div class="wdg-bd">
							Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. <a href="#">View Project</a>
							</div>
                        </div>                    
                    </div>
					<div class="wdg-rect wdg-rect-dark">
                        <img alt="AudioJungle" class="topic-thumb" src="images/sample_mini_portfolio3.jpg" width="100" height="100"/>
                    	<div class="wdg-core">
                            <h3 class="wdg-hd">AudioJungle Site Design</h3>
                            <div class="wdg-bd">
							Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. <a href="#">View Project</a>
							</div>
                        </div>                    
                    </div>
					<div class="wdg-rect wdg-rect-dark">
                        <img alt="AudioJungle" class="topic-thumb" src="images/sample_mini_portfolio3.jpg" width="100" height="100"/>
                    	<div class="wdg-core">
                            <h3 class="wdg-hd">AudioJungle Site Design</h3>
                            <div class="wdg-bd">
							Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. <a href="#">View Project</a>
							</div>
                        </div>                    
                    </div>						
				</div>
				<aside class="col-aside g-12">
					<section id="site-intro" class="wdg-aside">
						<div class="wdg-core">
							<h2 class="wdg-hd">Creatif is a WordPress portfolio theme for designers and creatives</h2>
							<div class="wdg-bd">
								<p>You can use it to quickly turn WordPress into a portfolio website.  Not familiar with WordPress? Fear not, the theme accompanies a book called <a href="#">How to Be a Rockstar Wordpress Designer</a> by Rockstar Resources due for release in 2008.</p>
								<p>The book teaches you to use WordPress theming to take advantage of this flexible CMS product to create dynamic sites.</p>
							  <p>And as if that’s not enough, you can see a photoshop to HTML tutorial on designing the theme over at <a href="http://psdtuts.com">PSDTUTS</a> and <a href="http://nettuts.com">NETTUTS</a>.</p>
							</div>
						</div>
					</section>
					<section id="fav-links" class="wdg-rect wdg-aside">
						<div class="wdg-core">
							<h2 class="wdg-hd">Favorite Topics</h2>
							<div class="wdg-bd">
								<ul>
									<li><a href="">V198.4HZ-Vivasky.com</a></li>
									<li><a href="">Two columns layout demo- Toggle layout</a></li>
									<li><a href="">Two columns layout demo- Toggle layout</a></li>
									<li><a href="">V198.4HZ-Vivasky.com</a></li>
									<li><a href="">Two columns layout demo- Toggle layout</a></li>
									<li><a href="">V198.4HZ-Vivasky.com</a></li>
									<li><a href="">Two columns layout demo- Toggle layout</a></li>
								</ul>
							</div>
						</div>
					</section>
				</aside>
			</section>

		</section>
		<footer id="footer"  class="clearfix">
			<section class="w-33">
        
				<div class="g-17">
					<h3>Designed by Collis Ta’eed, do with this as you please</h3>
					<p>You can read a photoshop tutorial for creating the design at <a href="http://psdtuts.com">PSDTUTS</a>, You can read a PS-&gt;HTML tutorial for creating the site at <a href="http://nettuts.com">NETTUTS</a> and you can learn how to turn the HTML into a Wordpress theme in the upcoming book <a href="http://freelanceswitch.com/book">How to be a Rockstar Wordpress Designer</a></p>
				</div>

				<div class="g-8">
					<h3>More Links</h3>
					<ul>
						<li><a href="http://vectortuts.com">VECTORTUTS</a></li>
						<li><a href="http://flashden.net">FlashDen</a></li>
						<li><a href="http://audiojungle.net">AudioJungle</a></li>
						<li><a href="http://freelanceswitch.com">FreelanceSwitch</a></li>
						<li><a href="http://faveup.com">FaveUp</a></li>
					</ul>
				</div>
				
				<div class="g-8">
					<h3>RSS</h3>
					<ul>
						<li><a href="">RSS Feed</a></li>
						<li><a href="">What is RSS?</a></li>
					</ul>
				</div>
        
        			
			</section>
		</footer>
		<!--页面交互的js文件-->
		<script type="text/javascript" src="js/AppFac.js"></script>
		<script type="text/javascript" src="js/site.xx.js"></script>
		<script type="text/javascript">
			AppFac.Init({
				uid: 'xxx'
			});
		</script>
    </body>

</html>
